<script setup>
	import {
		ref
	} from 'vue';
	import {
		useToast
	} from '@/uni_modules/nutui-uni/components/composables'
	// import { GoodCard } from '@/components/goods-card/goods-card.vue'
	import goodsCard from '@/components/goods-card/goodsCard.vue'
	
	const toast = useToast()
// 轮播图开始-------------------------------------------------
	// 轮播图数据
	const info = ref([{
			image: '/static/image/1.jpg'
		},
		{
			image: '/static/image/2.jpg'
		},
		{
			image: '/static/image/3.jpg'
		}
	]);
	const current = ref(0);
	const mode = ref('round');
	// 定义方法
	const change = (e) => {
		current.value = e.detail.current;
	}
// 轮播图结束-------------------------------------------------
// 搜索框开始-------------------------------------------------
	// 搜索数据
	const searchValue = ref('');
	// 搜索框点击事件
	const search = () => {
		if (searchValue.value) {
			toast.text('搜索内容为：' + searchValue.value)
		} else {
			toast.text('请输入搜索内容')
		}
	}
// 搜索框结束-------------------------------------------------
// 九宫格开始-------------------------------------------------
	// 九宫格数据
	const gridData = ref([{
			image: '/static/icon/grid-card/nongchang.png',
			text: '本地特产'
		},
		{
			image: '/static/icon/grid-card/shucai.png',
			text: '蔬菜水果'
		},
		{
			image: '/static/icon/grid-card/shuichan.png',
			text: '水产鱼虾'
		},
		{
			image: '/static/icon/grid-card/rou.png',
			text: '生鲜肉食'
		},
		{
			image: '/static/icon/grid-card/naicha.png',
			text: '健康饮品',

		},
		{
			image: '/static/icon/grid-card/egg.png',
			text: '农副产品'
		},
		{
			image: '/static/icon/grid-card/shenghuo.png',
			text: '生活采风'
		},
		{
			image: '/static/icon/grid-card/hot.png',
			text: '网红热销'
		}
	]);
// 九宫格结束-------------------------------------------------

// 商品卡片开始-------------------------------------------------
// 模拟商品数据
const sampleGoods = {
  imageUrl: '/static/image/4.jpg',
  name: '示例商品',
  price: 99.99,
  supplier: '供应商名称',

};
// 商品卡片结束-------------------------------------------------



</script>

<template>
	<view class="home">
		<!-- 顶部搜索框 -->
		<view class="search">
			<nut-searchbar v-model="searchValue" placeholder="请输入搜索关键词" />
		</view>
		<!-- 轮播图 -->
		<view class="swiper-box">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" autoplay="true">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image :src="item.image" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 分区盒子 -->
		<view class="grid-box">
			<fui-grid columns="4" class="fui-grid">
				<fui-grid-item v-for="(item,index) in gridData " :key="index" class="fui-grid-item">
					<view class="fui-grid__cell">
						<image :src="item.image" class="fui-icon" mode="widthFix"></image>
						<text>{{item.text}}</text>
					</view>
				</fui-grid-item>
			</fui-grid>

		</view>

		<!-- 商品卡片 -->
		<view class="goods-box">
			<goods-card v-for="(item,index) in 4"  key="index" :goods="sampleGoods" ></goods-card>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 搜索框样式
	.search {
		margin-bottom: 10px;
	}

	// 轮播图样式
	.swiper-box {
		height: 200px;
		margin: 4px;



		.swiper-item {
			width: 100%;
			height: 100%;
			border-radius: 10px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10px;

			}
		}
	}

	// 分区盒子样式
	.grid-box {
		margin: 10px;
		margin-top: 20px;
	    .fui-grid{
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			
		}
		.fui-grid__cell {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 80px;
			pardding: 10px;
			margin: 10px;

			image {
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				border-radius: 50%;
				background-color: #fff;
				width: 60px;
				height: 60px;
			}

			text {
				font-size: 12px;
				color: #333;
			}
		}

	}

	// 商品卡片样式
	.goods-box {
		margin: 10px;
	}
</style>